<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器</title>
    <link rel="stylesheet" href="./导航栏.css">
    <style>
body{
    background-image: url("分部/首页.jpg");
    background-size: cover;
    justify-content: center;
    align-items: center;
    background-color: black;
    }
.projuct{
    position: relative;
    margin: 160px 600px;
}

.center{
    background-color: white;
    border-radius: 12px; 
    height: 280px;
    width: 240px;
    margin:20px 20px;
    display: flex;
    position: absolute;
}

.blank{
    height: 320px;
    width: 280px;
    background-color: #333;
    border-radius: 12px;
}

.form{
    background-color: #333;
    padding: 40px 0 30px 40px;
    width: 280px;
}  
.btn{
    outline: none;
    cursor: pointer;
    font-size: 20px;
    height: 45px;
    margin: 5px 0 5px 10px;
    width: 45px;
}

.btn:first-child{
    margin: 5px 0 5px 10px;
}

.btn,
#display,
.form{
    border-radius: 25px;
}

#display{
    outline: none;
    background-color: white;
    color: black;
    font-size: 20px;
    height: 47px;
    text-align: right;
    width: 145px;
    padding-right: 10px;
    margin-left: 10px;
}

.number{
    background-color: #72778b;
    color: white;
}

.number:active{
    -webkit-transform: translateY(4px);
    -ms-transform: translateY(4px);
    -moz-transform: translateY(4px);
    transform: translateY(4px);
}

.operator{
    background-color: white;
    color: #72778b;
}

.operator:active{
    box-shadow: 0 2px #bebebe;
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    -moz-transform: translateY(2px);
    transform: translateY(2px);
}

.other{
    background-color: black;
    color: white;
}

.operator:active{
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    -moz-transform: translateY(2px);
    transform: translateY(2px);
}
    </style>
</head>
<body>
    <div class="tou">
        <header>
            <ul>
                <li><a href="../首页.html">首页</a></li>
                <li><a href="./计算器.html">计算器</a></li>
                <li><a href="./时钟.html">时钟</a></li>
                <li><a href="https://gitee.com/han-sunian/">仓库</a></li>
            </ul>
        </header>
    </div>
    <div class="projuct" >
        <div class="center">
            <form class="calculator">
                <input type="button" id="clear" class="btn other" value="AC">
                <input type="text" name="" id="display"><br/>
                <input type="button" class="btn number" 
                        value="7" onclick="get(this.value);" />
                <input type="button" class="btn number" 
                        value="8" onclick="get(this.value);" />
                <input type="button" class="btn number" 
                        value="9" onclick="get(this.value);" /> 
                <input type="button" class="btn operator" 
                        value="+" onclick="get(this.value);" /> 
                <br> 
                <input type="button" class="btn number" 
                        value="4" onclick="get(this.value);" /> 
                <input type="button" class="btn number" 
                        value="5" onclick="get(this.value);" /> 
                <input type="button" class="btn number" 
                        value="6" onclick="get(this.value);" /> 
                <input type="button" class="btn operator" 
                        value="*" onclick="get(this.value);" /> 
                <br>
                <input type="button" class="btn number" 
                        value="1" onclick="get(this.value);" /> 
                <input type="button" class="btn number" 
                        value="2" onclick="get(this.value);" /> 
                <input type="button" class="btn number" 
                        value="3" onclick="get(this.value);" /> 
                <input type="button" class="btn operator" 
                        value="-" onclick="get(this.value);" /> 
                <br>
                <input type="button" class="btn number" 
                        value="0" onclick="get(this.value);" /> 
                <input type="button" class="btn operator" 
                        value="." onclick="get(this.value);" /> 
                <input type="button" class="btn operator" 
                        value="/" onclick="get(this.value);" />
                <input type="button" class="btn other" 
                        value="=" onclick="calculates();" /> 
            </form>
        </div>
        <div class="blank"></div>
    </div>
    <script src="./game.js"></script>
</body>
</html>